<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式练习</title>
    <style>
        .success{
            color:green;
        }
        .fail{
            color: red;
        }
    </style>
    <script>
        function f1(){
            let phone = document.getElementById("phone").value;
            let regExp = /^[1][3589]\d{9}$/;
            let s1 = document.getElementById("s1");
            if(regExp.test(phone)){
                s1.innerHTML = "手机号码格式正确";
                s1.className = "success";
                return;
            }
            s1.innerHTML = "手机号码格式错误";
            s1.className = "fail";
        }
        function f2(){
            let email = document.getElementById("email").value;
            // 此时正则表达式中存在.的用法
            // .本身具有特殊含义,匹配除了换行与行结束符以外的一切字符
            // 如果不需要特殊含义生效,则需要通过\进行转义
            let regExp = /^[a-z]\w+[@][0-9a-z]+(\.com)(\.cn)?$/i;
            let s2 = document.getElementById("s2");
            if(regExp.test(email)){
                s2.innerHTML = "邮箱号码格式正确";
                s2.className = "success";
                return;
            }
            s2.innerHTML = "邮箱号码格式错误";
            s2.className = "fail";
        }
        function f3(){
            let idCard = document.getElementById("idCard").value;
            let regExp = /^\d{15}(\d{2}[0-9x])?$/i;
            let s3 = document.getElementById("s3");
            if(regExp.test(idCard)){
                s3.innerHTML = "身份证号码格式正确";
                s3.className = "success";
                return;
            }
            s3.innerHTML = "身份证号码格式错误";
            s3.className = "fail";
        }
    </script>
</head>
<body>
<!--
    校验手机号码的格式
    要求手机号必须由11位数字组成
    且必须由13、15、18、19开头
-->
<input type="text" id="phone"/>
<button onclick="f1()">校验手机号码</button>
<span id="s1"></span>
<br/>
<!--
    匹配邮箱
    要求邮箱必须以英文字母开头
    后面可以跟英文字母数字或者下划线
    后面跟@符号
    @后面可以是英文字母或者数字
    最终以.com或者.com.cn结尾
-->
<input type="text" id="email"/>
<button onclick="f2()">校验邮箱号码</button>
<span id="s2"></span>
<br/>
<!--
    匹配身份证号码
    要求身份证号码必须是15位或者是18
    如果是15位,必须全部为数字
    如果是18位,前17位必须是数字
        最后一位可以是数字,或者英文字母X
-->
<input type="text" id="idCard"/>
<button onclick="f3()">校验身份证号码</button>
<span id="s3"></span>


</body>
</html>